<template>
  <div class="dashboard-container">
    <div class="welcome-section">
      <h1>欢迎使用智慧会议管理平台</h1>
      <p>今天是 {{ currentDate }}，{{ greeting }}</p>
    </div>

    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>今日会议</span>
                <el-icon>
                  <Calendar />
                </el-icon>
              </div>
            </template>
            <div class="card-content">
              <div class="stat-number">{{ todayMeetings }}</div>
              <div class="stat-text">场会议</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>会议室使用率</span>
                <el-icon>
                  <PieChart />
                </el-icon>
              </div>
            </template>
            <div class="card-content">
              <div class="stat-number">{{ roomUsageRate }}%</div>
              <div class="stat-text">使用率</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>待审批会议</span>
                <el-icon>
                  <Document />
                </el-icon>
              </div>
            </template>
            <div class="card-content">
              <div class="stat-number">{{ pendingApprovals }}</div>
              <div class="stat-text">待审批</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="recent-meetings">
      <h2>近期会议</h2>
      <el-table :data="recentMeetings" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column prop="title" label="会议名称" width="250"></el-table-column>
        <el-table-column prop="room" label="会议室" width="150"></el-table-column>
        <el-table-column prop="date" label="日期" sortable width="150"></el-table-column>
        <el-table-column prop="time" label="时间" width="150"></el-table-column>
        <el-table-column prop="organizer" label="组织者" width="150"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { Calendar, PieChart, Document } from '@element-plus/icons-vue'

// 当前日期和问候语
const currentDate = computed(() => {
  const now = new Date()
  return now.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' })
})

const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '凌晨好'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  if (hour < 22) return '晚上好'
  return '夜深了，注意休息'
})

// 统计数据
const todayMeetings = ref(5)
const roomUsageRate = ref(68)
const pendingApprovals = ref(3)

// 近期会议数据
const recentMeetings = ref([
  {
    title: '产品迭代评审会议',
    room: '会议室A',
    date: '2024-05-15',
    time: '14:00-16:00',
    organizer: '张经理',
    status: '已完成'
  },
  {
    title: '项目启动会',
    room: '大会议室',
    date: '2024-05-16',
    time: '09:30-11:30',
    organizer: '李总监',
    status: '进行中'
  },
  {
    title: '季度财务报告',
    room: '会议室B',
    date: '2024-05-17',
    time: '13:00-15:00',
    organizer: '王财务',
    status: '待审批'
  },
  {
    title: '技术架构讨论',
    room: '会议室C',
    date: '2024-05-18',
    time: '10:00-12:00',
    organizer: '刘工程师',
    status: '已预约'
  },
  {
    title: '团队建设活动',
    room: '多功能厅',
    date: '2024-05-20',
    time: '15:00-17:00',
    organizer: 'HR部门',
    status: '已预约'
  }
])

// 状态标签类型
const getStatusType = (status: string): 'success' | 'warning' | 'info' | 'primary' | 'danger' => {
  switch (status) {
    case '已完成': return 'success'
    case '进行中': return 'primary'
    case '待审批': return 'warning'
    case '已预约': return 'info'
    default: return 'info'
  }
}

// 模拟获取数据
onMounted(() => {
  // 这里可以添加实际的数据获取逻辑
  console.log('Dashboard mounted')
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-section {
  margin-bottom: 30px;
}

.welcome-section h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.welcome-section p {
  font-size: 16px;
  color: #666;
}

.stats-section {
  margin-bottom: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
  padding: 10px 0;
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}

.stat-text {
  font-size: 14px;
  color: #666;
}

.recent-meetings h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
}
</style>
